<template>
  <div class="conMain">
    <el-card class="box-card">
      <div slot="header" class="topfix">
        <el-form :inline="true" :model="params" size="small" class="goodsForm" label-width="100px">
          <el-form-item label="代理APP_ID">
            <el-input v-model="params.s_app_id" clearable placeholder="请输入代理APP_ID" />
          </el-form-item>
          <el-form-item label="代理ID">
            <el-input v-model="params['s_agent*id']" clearable placeholder="请输入代理ID" />
          </el-form-item>
          <el-form-item label="代理姓名">
            <el-input v-model="params['s_agent*name']" clearable placeholder="请输入账号" />
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="params.s_status" clearable placeholder="请选择">
              <el-option v-for="(item,index) in statuslist" :label="item.txt" :value="item.val" />
            </el-select>
          </el-form-item>
          <el-form-item label=" ">
            <el-button type="primary" size="small" class="searchBtn" icon="el-icon-search" @click="handleSearch">搜索
            </el-button>
          </el-form-item>
        </el-form>
        <div style="text-align: right;">
          <el-button v-has="'sapi/index'" type="warning" size="small" class="ml10" plain @click="setapi"><i
            class="el-icon-setting"
          /> 接口配置</el-button>
          <el-button v-has="'agent/sapi/add'" type="primary" size="small" class="ml10" plain @click="add"><i
            class="el-icon-plus"
          /> 添加接口</el-button>
        </div>
      </div>
      <el-table v-loading="loading" :data="list" style="width: 100%" :empty-text="emptytxt">
        <el-table-column prop="id" label="序号" align="center" width="80" />
        <el-table-column prop="app_id" label="代理APP_ID" :show-overflow-tooltip="true" align="center" />
        <el-table-column prop="secret" label="代理SECRET" align="center" min-width="160" />
        <el-table-column prop="agent_id" label="代理ID" :show-overflow-tooltip="true" align="center" />
        <el-table-column prop="agent.name" label="代理姓名" :show-overflow-tooltip="true" align="center" />
        <el-table-column prop="jgtime" label="查单限制" align="center" width="80" />
        <el-table-column prop="allow_total" label="每日收单量" align="center" />
        <el-table-column prop="notify_url" label="回调URL" align="center" width="110" :show-overflow-tooltip="true" />
        <!-- <el-table-column prop="memo" label="备注" :show-overflow-tooltip="true" align="center" min-width="100"  /> -->
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 1" type="success" size="mini" disable-transitions>正常</el-tag>
            <el-tag v-else-if="scope.row.status == -1" type="danger" size="mini" disable-transitions>禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createtime" label="创建时间" align="center" min-width="110" />

        <el-table-column label="操作" fixed="right" align="center">
          <template slot-scope="scope">
            <el-link v-has="'agent/sapi/edit'" :underline="false" type="primary" title="编辑" @click="edit(scope.row)">编辑
            </el-link>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          :current-page="params.page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="params.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <el-dialog
      :title="sub.id==0?'添加接口信息':'编辑接口信息'"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      center
      width="40%"
    >
      <el-form ref="ruleForm" :model="sub" :rules="rules" label-width="110px">
        <el-form-item label="代理APP_ID" prop="app_id">
          <el-input
            v-model="sub.app_id"
            type="number"
            :disabled="sub.id==0?false:true"
            clearable
            placeholder="取值范围在1000-10000之间"
          />
        </el-form-item>
        <el-form-item label="代理秘钥" prop="secret">
          <el-input v-model="sub.secret" clearable placeholder="请输入秘钥">
            <template slot="append">
              <span @click="getSecret">生成</span>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="代理ID" prop="agent_id">
          <el-input v-model="sub.agent_id" type="number" clearable placeholder="请输入代理ID" />
        </el-form-item>
        <el-form-item label="回调URL" prop="notify_url">
          <el-input v-model="sub.notify_url" clearable placeholder="请输入回调URL" />
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="查单限制" prop="jgtime">
              <el-input v-model="sub.jgtime" type="number" clearable placeholder="多少秒查询一次">
                <template slot="append">秒</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="每天收量" prop="allow_total">
              <el-input v-model="sub.allow_total" type="number" clearable placeholder="0不限制">
                <template slot="append">单</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="IP白名单" prop="allow_ips">
          <el-input v-model="sub.allow_ips" type="number" clearable placeholder="多个以英文逗号隔开" />
        </el-form-item>
        <el-form-item label="备注" prop="memo">
          <el-input v-model="sub.memo" type="textarea" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="sub.status">
            <el-radio v-for="(item,index) in statuslist" :label="item.val">{{ item.txt }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="subForm('ruleForm')">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="接口配置" :visible.sync="apishow" :close-on-click-modal="false" left width="60%">
      <el-table v-loading="loadings" :data="lists" style="width: 100%" :empty-text="emptytxts">
        <el-table-column prop="goods_code" label="产品CODE" align="center" />
        <el-table-column prop="name" label="产品名称" align="center" :show-overflow-tooltip="true" />
        <el-table-column prop="passage.name" label="对应渠道" align="center" :show-overflow-tooltip="true" />
        <el-table-column prop="goods.name" label="对应商品" align="center" :show-overflow-tooltip="true" />
        <el-table-column prop="ka_name" label="对应类别" align="center" />
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 1" type="success" size="mini" disable-transitions>正常</el-tag>
            <el-tag v-else-if="scope.row.status == -1" type="danger" size="mini" disable-transitions>禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center">
          <template slot-scope="scope">
            <el-link :underline="false" type="primary" title="编辑" @click="editsapi(scope.row)">编辑</el-link>
          </template>
        </el-table-column>
      </el-table>

    </el-dialog>
    <el-dialog title="编辑配置" :visible.sync="apieditshow" :close-on-click-modal="false" center width="40%">
      <el-form :model="subapi" label-width="110px">
        <el-form-item label="产品CODE" prop="goods_code">
          <el-input v-model="subapi.goods_code" type="number" :disabled="subapi.id==0?false:true" clearable />
        </el-form-item>
        <el-form-item label="产品名称" prop="name">
          <el-input v-model="subapi.name" :disabled="subapi.id==0?false:true" clearable />
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="推送渠道商品">
              <el-cascader
                ref="tree"
                v-model="subapi.goods_id"
                style="width:100%;"
                :options="glist"
                :show-all-levels="true"
                :props="{ emitPath:false }"
                @change="changeGoods"
              />
            </el-form-item>
          </el-col>
          <el-col v-if="kast.length>1?true:false" :span="12">

            <el-form-item label="商品类别">
              <el-select v-model="subapi.ka" clearable placeholder="请选择">
                <el-option v-for="(item,index) in kast" :label="item.name" :value="index" />
              </el-select>
            </el-form-item>

          </el-col>
        </el-row>

        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="subapi.status">
            <el-radio v-for="(item,index) in statuslist" :label="item.val">{{ item.txt }}</el-radio>
          </el-radio-group>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="subFormApi">确定</el-button>
      </div>

    </el-dialog>

  </div>
</template>

<script>
import {
  sapi_index,
  sapi_add_post,
  sapi_edit_post,
  sapi_getSecret,
  sapi_list,
  sapi_edit_tt
} from '@/api/agent'
import {
  goods_reset_get,
  goods_edit
} from '@/api/passage'

export default {
  data() {
    return {
      total: 0,
      loading: true,
      emptytxt: '',
      list: [],
      statuslist: [{
        val: '1',
        txt: '正常'
      }, {
        val: '-1',
        txt: '禁用'
      }],
      params: {
        s_app_id: '',
        's_agent*id': '',
        's_agent*name': '',
        s_status: '',
        page: 1,
        pagesize: 10
      },
      dialogVisible: false,
      sub: {
        id: 0,
        app_id: '',
        agent_id: '',
        secret: '',
        notify_url: '',
        jgtime: '0',
        allow_total: '0',
        allow_ips: '',
        send_passid: '',
        status: '1',
        memo: ''
      },
      rules: {
        app_id: [{
          required: true,
          message: '代理APP_ID不能为空',
          trigger: 'blur'
        }],
        agent_id: [{
          required: true,
          message: '代理ID不能为空',
          trigger: 'blur'
        }],
        secret: [{
          required: true,
          message: '秘钥不能为空',
          trigger: 'blur'
        }]
      },
      apishow: false,
      loadings: true,
      emptytxts: '',
      lists: [],
      apieditshow: false,
      subapi: {
        id: 0,
        goods_code: '',
        name: '',
        goods_id: '',
        ka: 0,
        status: '1'
      },
      glist: [],
      kast: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList(page) {
      this.params.page = page || this.params.page
      this.emptytxt = '加载中...'
      this.loading = true
      sapi_index(this.params).then(res => {
        this.list = res.data.list
        this.total = res.data.total
        this.loading = false
        if (this.list.length == 0) {
          this.emptytxt = '暂无数据'
        }
      })
    },
    handleSearch() {
      this.getList(1)
    },
    handleSizeChange(val) {
      this.params.pagesize = val
      this.getList(1)
    },
    handleCurrentChange(val) {
      this.params.page = val
      this.getList()
    },
    add() {
      this.sub = {
        id: 0,
        app_id: '',
        agent_id: '',
        secret: '',
        notify_url: '',
        jgtime: '0',
        allow_total: '0',
        allow_ips: '',
        send_passid: '',
        status: '1',
        memo: ''
      }
      this.dialogVisible = true
    },
    edit(row) {
      this.sub = {
        id: row.id,
        app_id: row.app_id,
        agent_id: row.agent_id,
        secret: row.secret,
        notify_url: row.notify_url,
        jgtime: row.jgtime,
        allow_total: row.allow_total,
        allow_ips: row.allow_ips,
        send_passid: row.send_passid,
        status: row.status + '',
        memo: row.memo
      }
      this.dialogVisible = true
    },
    subForm(formName) {
      this.$refs[formName].validate((valid) => {
        console.log(this.sub)
        if (valid) {
          if (this.sub.id > 0) {
            console.log(this.sub.createtime)
            sapi_edit_post(this.sub).then(res => {
              this.$message.success(res.msg)
              this.dialogVisible = false
              this.getList()
            })
          } else {
            sapi_add_post(this.sub).then(res => {
              this.$message.success(res.msg)
              this.dialogVisible = false
              this.getList()
            })
          }
        } else {
          return false
        }
      })
    },
    getSecret() {
      sapi_getSecret().then(res => {
        this.sub.secret = res.data
      })
    },
    setapi() {
      this.apishow = true
      this.getSapilist()
    },
    getSapilist() {
      this.emptytxts = '加载中...'
      this.loadings = true
      sapi_list(this.params).then(res => {
        this.lists = res.data.list
        this.loadings = false
        if (this.lists.length == 0) {
          this.emptytxts = '暂无数据'
        }
      })
    },
    editsapi(row) {
      this.kast = []
      this.glist = []
      goods_reset_get().then(res => {
        this.glist = res.data.list
      })
      goods_edit({
        id: row.goods_id
      }).then(res => {
        this.kast = res.data.row.kaka
      })

      this.subapi = {
        id: row.id,
        goods_code: row.goods_code,
        name: row.name,
        goods_id: row.goods_id,
        ka: row.ka,
        status: row.status + ''
      },

      this.apieditshow = true
    },
    changeGoods(index) {
      this.subapi.ka = 0

      goods_edit({
        id: index
      }).then(res => {
        this.kast = res.data.row.kaka
      })
    },
    subFormApi() {
      sapi_edit_tt(this.subapi).then(res => {
        this.$message.success(res.msg)
        this.apieditshow = false
        this.getSapilist()
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
